何謂設計系統 Design System x AIR I

分享製作 AIR management 產品網站除舊佈新的一步一腳印👣

準備好開始與鴨編設計系統的奇幻之旅的嗎XD Let's go👊🏼👊🏼👊🏼

檢視目前開發流程前會遇到的狀況

在開始了解設計系統Design System前,可以透過這三種方式來檢視目前的設計流程:


1.  沒有教律的開發流程

2.  不一致的介面元素

3.  對設計產出沒有信心


如果你正在被這三個問題困擾著的話,那麼設計系統Design System就是最佳的解決辦法。
 

設計系統的流程

那麼該如何著手開始做設計系統Design System呢?
我們先從概論的方式來認識什麼是設計系統吧!


Atomic Design 原子設計方法論

這是由於 Brad Forst 在 2013 年提出此設計概念:

靈感來自於他高中時期的化學實驗室,可以用肉眼看到的物體都是由——

原子(Atoms)組成

原子結合在一起形成分子(Molecures)

分子組合成相對更複雜的組織(Organisms)

於是Brad藉此概念應用在介面設計。
 

Atomic Design原子設計方法論解析

原子設計是一個設計方法論,運用在設計系統的脈絡上由五種不同的階段組合,創建一個有層次、計畫性的介面系統:


Atoms 原子
為網頁構成的基本元素,HTML的tags,例如標籤、輸入,或是一個按鈕,也可以為抽象的概念,例如字體、色調等

Molecules 分子
由元素構成的簡單UI物件

Organisms 組織
相對分子而言,較為複雜的構成物,由原子及分子所組成

Templates 模板
以頁面為基礎的架構,將以上元素進行排版 > wireframe

Pages 頁面
將實際內容(圖片、文章等)套件在特定模板 > 套圖與文案後形成一個完整個頁面
 

設計X產品X工程

Nordic.design是一個設計者演講舞台,由多個共同理念的公司所組成,Airbnb也在其中,這段話就是出自於Airbnb的首席設計師 Karri Saarinen

“由一個產品中心管控每個元件的品質,更改版本時也能夠一併更新,讓設計跟開發可以規模化。”
—Karri Saarinen

如果以實體產品形容的話,你可以把它想像成樂高(Lego)。
每個元件都是可以合成的模組,擁有千變萬化的樣式。
 

為什麼需要設計系統呢?

為什麼需要設計系統呢?


市場/平台逐趨成熟
由於數位產品的市場越來越飽和,大眾對產品的品質要求更高。

建立產品一致性
不但是在單一產品之內,包含在不同平台及裝置間的轉換,睇需建立產品的連貫性。

加速開發過程
由於有一個統一的設計控管系統,開發團隊可以隨時提取設計元素、同步更新,減少設計與開發反覆確認的過程。

擴張產品團隊
設計系統是由有清楚規範、一系列可重複利用的元素所組成,當產品模組化,可延展性就增加了。

專注於解決真正的問題
設計系統讓團隊的每個人可以加速構思到生產的過程,專注於大方向的用戶體驗。


但設計系統並不是適合每個團隊的,譬如像是炒短線商品的短期經營,若擁有設計系統可能會綁手綁腳的,不過能將設計系統的觀念放在心上,對於未來發展十分重要,下回將繼續介紹設計系統的執行面。